<template>
  <!-- 电子签名 -->
  <div class="whole-container">
    <div class="header-container">
      <div></div>
      <div>
        <span>手写电子签名</span>
      </div>
      <div class="setting-icon" id="autograph-step2" @click="openSettingDialog">
        <el-tooltip
          effect="dark"
          content="点击配置画布"
          placement="top">
          <i class="el-icon-s-tools"></i>
        </el-tooltip>
      </div>
    </div>
    <div class="content">
      <div class="esign-container" id="autograph-step1">
        <vue-esign
          id="canvas"
          ref="esign"
          :width="800"
          :height="400"
          style="border: 1px solid #c2c1c1;"
          :isCrop="form.isCrop"
          :lineWidth="form.lineWidth"
          :lineColor="form.lineColor"
          :bgColor.sync="form.bgColor"
        ></vue-esign>
      </div>

      <div class="btn-container" id="autograph-step3">
        <el-button type="success" plain @click="handleGenerate">生成图片</el-button>
        <el-button type="danger" plain @click="handleClear">清空画布</el-button>
      </div>
    </div>

    <el-dialog
      title="配置画布"
      :visible.sync="dialogVisible"
      @close="handleCloseDialog"
      :modal-append-to-body="false"
    >
      <div>
        <el-form ref="form" :model="form" label-width="140px">
          <!-- <el-form-item label="宽度(像素)：">
            <el-input-number 
              v-model="form.width" 
              :min="1" :max="2000" 
              :precision="0" :step="1"
              style="width: 100%"
              @change="changeWidth"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="高度(像素)：">
            <el-input-number 
              v-model="form.height" 
              :min="1" :max="1000" 
              :precision="0" :step="1"
              style="width: 100%"
              @change="changeHeight"
            ></el-input-number>
          </el-form-item> -->
          <el-form-item label="画笔粗细(像素)：">
            <el-input-number 
              v-model="form.lineWidth" 
              :min="1" :max="10" 
              :precision="0" :step="1"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="画笔颜色：">
            <el-color-picker 
              v-model="form.lineColor" 
              show-alpha
              @active-change="changeLineColor"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="画布背景颜色：">
            <el-color-picker 
              v-model="form.bgColor" 
              show-alpha
              @active-change="changeBgColor"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="是否剪裁：">
            <el-switch v-model="form.isCrop"></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="handleReset">还原默认</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import steps from "./autographStep"

export default {
  name:'Autograph',
  data() {
    return {
      dialogVisible: false,
      form: {
        isCrop: false,//是否剪裁
        lineWidth: 4,
        lineColor: "rgba(0,0,0,1)",
        bgColor: "rgba(255,255,255,1)"
      },
    }
  },
  mounted() {
    setTimeout(() => {
      this.guide()
    }, 500)
  },
  methods: {
    guide() {//页面引导功能
      this.$driver.defineSteps(steps)
      this.$driver.start()
    },
    openSettingDialog() {
      this.dialogVisible = true
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    changeLineColor(val) {
      this.form.lineColor = val;
    },
    changeBgColor(val) {
      this.form.bgColor = val;
    },
    handleGenerate() {
      let that = this;
      this.$refs.esign.generate().then(res=>{
        //转成文件
        let blob = that.dataURLtoBlob(res)
        let tofile = that.blobToFile(blob,"画布.jpg")
        // console.log(tofile);
        let aTag = document.createElement("a")
        aTag.download = tofile.name;
        aTag.href = window.URL.createObjectURL(tofile)
        aTag.click()
        aTag.remove()
      }).catch(e=>[
        //画布中没有签字提示
        this.$notify({
          title: "提示",
          message: "没有动过笔",
          type: "warning"
        })
      ])
    },
    handleReset() {
      this.changeLineColor("rgba(0,0,0,1)")
      this.form .isCrop = false
      this.form.lineWidth = 4
      this.dialogVisible = false
      this.$nextTick(()=>{
        this.form.bgColor = "rgba(255,255,255,1)"
      })
    },
    handleClear() {
      this.$refs.esign.reset()
      this.$nextTick(()=>{
        this.form.bgColor = "rgba(255,255,255,1)"
      })
    },
    // 将base64转换为blob
    dataURLtoBlob(dataurl) {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 将blob转换为file
    blobToFile(theBlob, fileName) {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return new File([theBlob],fileName, {type: theBlob.type,lastModified: Date.now()})
    },
  }
}
</script>

<style lang='less' scoped>
  .whole-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    .header-container {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        font-size: 18px;
      }
      .setting-icon {
        cursor: pointer;
        i {
          font-size: 24px;
        }
      }
      
    }
    .content {
      width: 100%;
      height: calc( 100% - 50px);
      min-height: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      box-sizing: border-box;
      .btn-container {
        margin-top: 16px;
      }
    }
  }
</style>